<template>
  <a-card :bordered="false">

    <a-row :gutter="8">
      <a-col :span="6">
        <!-- 加上 show-line 属性后，展开收起图标自动变成 +- 样式 -->
        <a-tree
          class="template-5-tree"
          :tree-data="treeData"
          show-icon
          show-line
          :expandedKeys="treeExpandedKeys"
          :selectedKeys="[pagination.current]"
          @expand="handleTreeExpand"
          @select="handleTreeSelect"
        >
          <!-- 自定义子节点图标 -->
          <a-icon slot="myIcon" type="unordered-list" style="color:#0c8fcf;" />
        </a-tree>
      </a-col>
      <a-col :span="18">
        <j-vxe-table
          row-number
          row-selection
          :height="750"
          :loading="loading"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          @pageChange="handleTablePageChange"
        />
      </a-col>
    </a-row>


  </a-card>
</template>

<script>
import { getAction } from '@api/manage'
import { JVXETypes } from '@/components/jeecg/JVxeTable'

// 【多种布局模板】左侧为树，右侧为行编辑
export default {
  name: 'Template5',
  data() {
    return {
      // 是否正在加载
      loading: false,
      // 分页器参数
      pagination: {
        // 当前页码
        current: 1,
        // 每页的条数
        pageSize: 50,
        // 可切换的条数
        pageSizeOptions: ['50'],
        // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
        total: 0
      },
      // 选择的行
      selectedRows: [],
      // 数据源，控制表格的数据
      dataSource: [],
      // 列配置，控制表格显示的列
      columns: [
        { key: 'num', title: '序号', width: '80px' },
        {
          // 字段key，跟后台数据的字段名匹配
          key: 'ship_name',
          // 列的标题
          title: '船名',
          // 列的宽度
          width: '180px',
          // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
          type: JVXETypes.input
        },
        { key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
        { key: 'len', title: '长', width: '80px', type: JVXETypes.input },
        { key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
        { key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
        { key: 'count', title: '数', width: '40px' },
        {
          key: 'company',
          title: '公司',
          // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
          // 如果要做占满表格的列可以这么写
          minWidth: '180px',
          type: JVXETypes.input
        },
        { key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
      ],
      // 树的数据，这里模拟分页固定数据，实际情况应该是后台查出来的数据
      treeData: [
        // 第1级数据
        {
          title: '1-10页',
          key: '1-10',
          // 第2级数据
          children: [
            { title: '第 1 页', key: 1, slots: { icon: 'myIcon' } },
            { title: '第 2 页', key: 2, slots: { icon: 'myIcon' } },
            {
              title: '第 3 页',
              key: 3,
              slots: { icon: 'myIcon' },
              // 第3级数据
              children: [
                { title: '第 333 页', key: 333, slots: { icon: 'myIcon' } },
                { title: '第 444 页', key: 444, slots: { icon: 'myIcon' } },
                { title: '第 555 页', key: 555, slots: { icon: 'myIcon' } }
                // 第4第5级以此类推，加上 children 属性即可
              ]
            },
            { title: '第 4 页', key: 4, slots: { icon: 'myIcon' } },
            { title: '第 5 页', key: 5, slots: { icon: 'myIcon' } },
            { title: '第 6 页', key: 6, slots: { icon: 'myIcon' } },
            { title: '第 7 页', key: 7, slots: { icon: 'myIcon' } },
            { title: '第 8 页', key: 8, slots: { icon: 'myIcon' } },
            { title: '第 9 页', key: 9, slots: { icon: 'myIcon' } },
            { title: '第 10 页', key: 10, slots: { icon: 'myIcon' } }
          ],
          slots: { icon: 'myIcon' }
        },
        {
          title: '11-20页',
          key: '11-20',
          children: [
            { title: '第 11 页', key: 11, slots: { icon: 'myIcon' } },
            { title: '第 12 页', key: 12, slots: { icon: 'myIcon' } },
            { title: '第 13 页', key: 13, slots: { icon: 'myIcon' } },
            { title: '第 14 页', key: 14, slots: { icon: 'myIcon' } },
            { title: '第 15 页', key: 15, slots: { icon: 'myIcon' } },
            { title: '第 16 页', key: 16, slots: { icon: 'myIcon' } },
            { title: '第 17 页', key: 17, slots: { icon: 'myIcon' } },
            { title: '第 18 页', key: 18, slots: { icon: 'myIcon' } },
            { title: '第 19 页', key: 19, slots: { icon: 'myIcon' } },
            { title: '第 20 页', key: 20, slots: { icon: 'myIcon' } }
          ],
          slots: { icon: 'myIcon' }
        }
      ],
      // 树展开的列，默认 1-10
      treeExpandedKeys: ['1-10'],
      // 查询url地址
      url: {
        getData: '/mock/vxe/getData'
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {

    // 加载行编辑的数据
    loadData() {
      // 封装查询条件
      let formData = {
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      }
      // 调用查询数据接口
      this.loading = true
      getAction(this.url.getData, formData).then(res => {
        if (res.success) {
          // 后台查询回来的 total，数据总数量
          this.pagination.total = res.result.total
          // 将查询的数据赋值给 dataSource
          this.dataSource = res.result.records
          // 重置选择
          this.selectedRows = []
        } else {
          this.$error({ title: '主表查询失败', content: res.message })
        }
      }).finally(() => {
        // 这里是无论成功或失败都会执行的方法，在这里关闭loading
        this.loading = false
      })
    },

    handleTablePageChange(event) {
      // 重新赋值
      this.pagination.current = event.current
      this.pagination.pageSize = event.pageSize
      // 查询数据
      this.loadData()
      // 判断树展开的key
      if (event.current <= 10) {
        this.treeExpandedKeys = ['1-10']
      } else {
        this.treeExpandedKeys = ['11-20']
      }
    },

    // 树被选择触发的事件
    handleTreeSelect(selectedKeys) {
      let key = selectedKeys[0]
      if (typeof key === 'string') {
        // 控制树展开为当前选择的列
        this.treeExpandedKeys = selectedKeys
      } else {
        this.pagination.current = key
        this.loadData()
      }
    },

    // 树被选择触发的事件
    handleTreeExpand(expandedKeys) {
      this.treeExpandedKeys = expandedKeys
    }

  }
}
</script>

<style lang="less">
/** 隐藏文件小图标 */
.template-5-tree.ant-tree {
  li span.ant-tree-switcher.ant-tree-switcher-noop {
    display: none;
  }
}
</style>